
<template>
  <el-carousel class="car-img" :autoplay="true" type="card"    ref="carouselRef">
    <el-carousel-item class="item-img"   v-for="(item,index) in carousel" :key="index" @mouseenter="onItemHover(item)">
<!--直接访问后端图片服务器地址-->
      <img class="my-img" @click="getItemArticle(item)" :src="IP+ baseUrl +item.img"  alt="文章图片">
    </el-carousel-item>
  </el-carousel>
</template>
<script setup >
import {listArticleTop} from '@/api/article'
import {ref} from "vue";
import router from "@/router/index.js";
const carousel = ref([]);
const carouselRef = ref(null);
const baseUrl = import.meta.env.VITE_APP_BASE_API
const IP = import.meta.env.VITE_APP_BASE_IP
async function getTop(){
  const response = await listArticleTop();
  carousel.value = response.data.data

}

function getItemArticle(item){
  router.push({
    name:'myEditor',
    params:{
      articleId:item.id
    }
  })
}
getTop();
function onItemHover(img) {
  const index = carousel.value.findIndex(item => item === img);
  if (index!== -1) {
    carouselRef.value.setActiveItem(index);
  }
}
</script>
<style scoped>
.car-img{
  margin-top: 50px;
  height: 300px;
  width: 100%;
  margin-bottom: 100px;
}
.my-img{
  width: 100%;
  height: 100%;
}
:deep(.el-carousel__item):nth-child(2n) {
  background-color: #cbf1f5;
}
:deep(.el-carousel__item):nth-child(2n + 1) {
  background-color: #e3fdfd;
}
</style>